<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80') no-repeat center center fixed;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            color: #333;
            overflow-y: auto; /* 允许垂直滚动 */
        }

        .container {
            background-color: rgba(255, 255, 255, 0.7); /* 透明背景 */
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            width: 300px; /* 调整宽度 */
            max-height: 400px; /* 设置最大高度 */
            overflow-y: auto; /* 内容过多时显示滚动条 */
        }

        /* 自定义滚动条样式 */
        .container::-webkit-scrollbar {
            width: 10px; /* 滚动条宽度 */
        }

        .container::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1); /* 滚动条轨道背景色 */
        }

        .container::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.3); /* 滚动条拇指背景色 */
            border-radius: 5px; /* 滚动条拇指圆角 */
        }

        .container::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.5); /* 滚动条拇指悬停背景色 */
        }

        h2 {
            margin-bottom: 20px;
            color: #333;
        }

        .form-group {
            margin-bottom: 15px;
            text-align: left;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }

        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="number"] {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            border: none;
            border-radius: 4px;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #218838;
        }

        #response-message {
            margin-top: 20px;
            font-size: 14px;
            color: #ff4d4d;
        }

        #response-message.success {
            color: #28a745;
        }

        .already-have-account {
            margin-top: 20px;
            color: #007bff;
            cursor: pointer;
            text-decoration: underline;
        }

        .already-have-account:hover {
            color: #0056b3;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container">
    <h2>注册</h2>
    <form id="registrationForm" method="post">
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div class="form-group">
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
            <label for="age">年龄:</label>
            <input type="number" id="age" name="age" min="0" max="150" required>
        </div>
        <div class="form-group">
            <label for="sex">性别:</label>
            <select id="sex" name="sex" required>
                <option value="男">男</option>
                <option value="女">女</option>
                <!-- 可以添加更多选项 -->
            </select>
        </div>
        <div class="form-group">
            <label for="address">地址:</label>
            <input type="text" id="address" name="address" required>
        </div>
        <button type="submit">注册</button>
    </form>
    <div id="response-message"></div>
    <div class="already-have-account" id="loginLink">已有账号？去登录</div>
</div>
<script>
    document.getElementById('registrationForm').addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单的默认提交行为

        // 收集表单数据
        const formData = {
            username: document.getElementById('username').value,
            password: document.getElementById('password').value,
            email: document.getElementById('email').value,
            userage: parseInt(document.getElementById('age').value, 10), // 转换为整数
            usersex: document.getElementById('sex').value,
            useraddress: document.getElementById('address').value
        };

        // 使用axios发送POST请求
        axios.post('http://127.0.0.1:9999/register', formData)
            .then(response => {
                console.log(response);
                const data = response.data;
                console.log(data.code);
                // 处理响应
                if (data.code === 0) {
                    document.getElementById('response-message').innerText = '注册成功!';
                    document.getElementById('response-message').classList.add('success');
                    window.location.assign("login.html");
                    // 可能还需要清除表单或进行其他操作
                } else {
                    document.getElementById('response-message').innerText = '注册失败: ' + response.data.message;
                    document.getElementById('response-message').classList.remove('success');
                }
            })
            .catch(error => {
                // 处理请求错误
                document.getElementById('response-message').innerText = '注册过程中发生错误: ' + error.message;
                document.getElementById('response-message').classList.remove('success');
            });
    });

    // 添加登录链接的点击事件
    document.getElementById('loginLink').addEventListener('click', function() {
        window.location.href = "login.html";
    });
</script>
</body>
</html>